import React from 'react';
import { Drawer, Tabs, Icon, Button, Select, Radio, Row, Col, Card } from 'antd';
import Editor from '@/utils/Editor';

const GlobalSet = React.lazy(() => import('../../globalSet/GlobalSet'));
const SpecialCase = React.lazy(() => import('../../specialCase/SpecialCase'));
const DialogStart = React.lazy(() => import('../../start/start'));
const DialogSlotMark = React.lazy(() => import('../../collect/slotmark/mark'));
const ActionReply = React.lazy(() => import('../../action/reply'));
const ActionApi = React.lazy(() => import('../../action/api'));
const ActionClear = React.lazy(() => import('../../action/clear'));
const DialogConfirmSetting = React.lazy(() => import('../../confirm/setting'));
const CollectSlot = React.lazy(() => import('../../collect/slotInquiry/index'));
const SlotCheck = React.lazy(() => import('../../collect/slotCheck/index'));
const SlotRules = React.lazy(() => import('../../collect/slotRules/index'));
const SlotExtra = React.lazy(() => import('../../filter/slotExtra/index'));
const SlotOrApi = React.lazy(() => import('../../case/slotOrApi/index'));
const UserReply = React.lazy(() => import('../../case/userReply/index'));
const FilterSet = React.lazy(() => import('../../filter/set/index'));
import styles from './index.less';

const { TabPane } = Tabs;

class RightDrawer extends React.Component {
  state = {
    visible: false,
    rvalue: 1,
    dis: 'none',
    v1: true,
    v2: false,
    v3: false,
    specialVisible: true,
    triggerCase: 1,
    activeKey: 1,
  };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    }, () => {
      this.props.onClosed();
    });
  };

  change = (event) => {
    switch (event.target.value) {
      case 1:
        this.setState({
          rvalue: event.target.value,
          v2: false, v3: false, v1: true,
        });
        break;
      case 2:
        this.setState({
          rvalue: event.target.value,
          v1: false, v3: false, v2: true,
        });
        break;
      case 3:
        this.setState({
          rvalue: event.target.value,
          v1: false, v2: false, v3: true,
        });
        break;
    }

  };

  changeCase = (e) => {
    this.setState({
      triggerCase: e.target.value,
    });
  };

  changeTabs = (activeKey) => {
    console.log(activeKey);
    this.setState({
      activeKey,
    });
  };

  checkModel = (model, dialogId, nodeIds) => {
    switch (model) {
      case 'start':
        return (
          <div className={styles.pageWarp}>
            <Row>
              <Col span={1} style={{ width: 30 }}>
                   <span onClick={this.onClose} style={{ cursor: 'pointer', color: '#222' }}>
                      <Icon type="arrow-left"/>
                    </span>
              </Col>
              <Col span={4} style={{ marginRight: 20 }} onClick={() => this.changeTabs(1)}>
                <span className={styles.blackText}>开始流程编辑</span>
              </Col>
            </Row>
            <div className={styles.cardBody}>
              {
                this.state.activeKey === 1 ?
                  <DialogStart nodeId={nodeIds} stage={model} dialogId={dialogId}></DialogStart>
                  :
                  ''
              }
            </div>
          </div>
        );
      case 'golbalSet':
        return (
          <div className={styles.pageWarp}>
            <Row>
              <Col span={1} style={{ width: 30 }}>
                   <span onClick={this.onClose} style={{ cursor: 'pointer', color: '#222' }}>
                      <Icon type="arrow-left"/>
                    </span>
              </Col>
              <Col span={2} style={{ marginRight: -38 }} onClick={() => this.changeTabs(1)}>
                <span className={this.state.activeKey === 1 ? styles.blackText : styles.greyText}>全局设置</span>
              </Col>
              <Col span={4} style={{ borderLeft: '2px solid lightgrey', paddingLeft: 37 }}
                   onClick={() => this.changeTabs(2)}>
                <span className={this.state.activeKey === 2 ? styles.blackText : styles.greyText}>特殊情况处理</span>
              </Col>
            </Row>
            <div className={styles.cardContent}>
              <div className={styles.cardBody}>
                {
                  this.state.activeKey === 1 ?
                    <GlobalSet dialogId={dialogId}></GlobalSet>
                    :
                    <SpecialCase type="1" dialogId={dialogId}></SpecialCase>
                }
              </div>
            </div>

          </div>

        );
      case 'slot':
        return (

          <div className={styles.pageWarp}>
            <Row>
              <Col span={1} style={{ width: 30 }}>
                   <span onClick={this.onClose} style={{ cursor: 'pointer', color: '#222' }}>
                      <Icon type="arrow-left"/>
                    </span>
              </Col>
              <Col span={2} style={{ marginRight: -40,width: 168}} onClick={() => this.changeTabs(1)}>
                <span className={this.state.activeKey === 1 ? styles.blackText : styles.greyText}>词槽询问</span>
              </Col>
              <Col span={3} style={{ borderLeft: '2px solid lightgrey', paddingLeft: 37, width: 168 }}
                   onClick={() => this.changeTabs(2)}>
                <span className={this.state.activeKey === 2 ? styles.blackText : styles.greyText}>词槽值校验</span>
              </Col>
              <Col span={4} style={{ borderLeft: '2px solid lightgrey', paddingLeft: 37, width: 168 }}
                   onClick={() => this.changeTabs(3)}>
                <span className={this.state.activeKey === 3 ? styles.blackText : styles.greyText}>用户语料标注</span>
              </Col>
              <Col span={4} style={{ borderLeft: '2px solid lightgrey', paddingLeft: 37, width: 168 }}
                   onClick={() => this.changeTabs(4)}>
                <span className={this.state.activeKey === 4 ? styles.blackText : styles.greyText}>词槽抽取规则</span>
              </Col>
              <Col span={4} style={{ borderLeft: '2px solid lightgrey', paddingLeft: 37, width: 168 }}
                   onClick={() => this.changeTabs(5)}>
                <span className={this.state.activeKey === 5 ? styles.blackText : styles.greyText}>特殊情况处理</span>
              </Col>
            </Row>
            <div className={styles.cardContent}>
              <div className={styles.cardBody}>
                {
                  this.state.activeKey === 1 ?
                    <CollectSlot nodeId={nodeIds} stage={model} dialogId={dialogId}/>
                    : ''
                }
                {
                  this.state.activeKey == 2 ?
                    <SlotCheck nodeId={nodeIds} stage={model} dialogId={dialogId}/>
                    : ''
                }
                {
                  this.state.activeKey == 3 ?
                    <DialogSlotMark nodeId={nodeIds} dialogId={dialogId} stage={model}></DialogSlotMark>
                    : ''
                }
                {
                  this.state.activeKey == 4 ?
                    <SlotRules nodeId={nodeIds} stage={model} dialogId={dialogId}/>
                    : ''
                }
                {
                  this.state.activeKey == 5 ?
                    <SpecialCase type="5" nodeId={nodeIds} dialogId={dialogId} stage={model}></SpecialCase>
                    : ''
                }
              </div>
            </div>
          </div>

        );
      case 'action':
        return (
          <div>
            <div className={styles.pageWarp}>
              <Row>
                <Col span={1} style={{ width: 30 }}>
                   <span onClick={this.onClose} style={{ cursor: 'pointer', color: '#222' }}>
                      <Icon type="arrow-left"/>
                    </span>
                </Col>
                <Col span={3} style={{ marginRight: 14 }}>
                  <span className={styles.blackText}> 动作编辑</span>
                </Col>
              </Row>
              <div className={styles.cardContent}>
                <div className={styles.cardBody}>
                  <div style={{paddingLeft:'25px',fontSize:'18px',color:'#4E8CEE'}}>动作设置</div>
                  <div style={{ margin: '15px 0px', paddingLeft: '30px', color: '#C8C8C8', fontSize: '15px' }}>
                    <span style={{ color: '#C8C8C8', fontSize: '18px' }}> 动作类型</span>
                    <Radio.Group value={this.state.rvalue} onChange={event => {
                      this.change(event);
                    }} style={{ marginLeft: 10 }}>
                      <Radio value={1} style={{ marginLeft: 20 }}>回复</Radio>
                      <Radio value={2} style={{ marginLeft: 20 }}>调用API接口</Radio>
                      <Radio value={3} style={{ marginLeft: 20 }}>清空词槽</Radio>
                    </Radio.Group>
                  </div>
                  {
                    this.state.v3 ?
                      <ActionClear nodeId={nodeIds} stage={model} dialogId={dialogId}></ActionClear> : <div></div>
                  }
                  {
                    this.state.v2 ?
                      <ActionApi nodeId={nodeIds} stage={model} dialogId={dialogId}></ActionApi> : <div></div>
                  }
                  {
                    this.state.v1 ?
                      <ActionReply nodeId={nodeIds} stage={model} dialogId={dialogId}></ActionReply> : <div></div>
                  }
                </div>
              </div>
            </div>
          </div>
        );
      case 'confirm':
        return (
          <div className={styles.pageWarp}>
            <Row>
              <Col span={1} style={{ width: 30 }}>
                   <span onClick={this.onClose} style={{ cursor: 'pointer', color: '#222' }}>
                      <Icon type="arrow-left"/>
                    </span>
              </Col>
              <Col span={4} style={{ marginRight: 14, width: 120 }} onClick={() => this.changeTabs(1)}>
                <span className={this.state.activeKey === 1 ? styles.blackText : styles.greyText}>信息确认设置</span>
              </Col>
              <Col span={4} style={{ borderLeft: '2px solid lightgrey', paddingLeft: 37, width: 168 }}
                   onClick={() => this.changeTabs(2)}>
                <span className={this.state.activeKey === 2 ? styles.blackText : styles.greyText}>用户语料标注</span>
              </Col>
              <Col span={4} style={{ borderLeft: '2px solid lightgrey', paddingLeft: 37, width: 168 }}
                   onClick={() => this.changeTabs(3)}>
                <span className={this.state.activeKey === 3 ? styles.blackText : styles.greyText}>特殊情况处理</span>
              </Col>

            </Row>
            <div className={styles.cardContent}>
              <div className={styles.cardBody}>
                {
                  this.state.activeKey === 1 ?
                    <DialogConfirmSetting nodeId={nodeIds} dialogId={dialogId} stage={model}/>
                    : ''
                }
                {
                  this.state.activeKey == 2 ?
                    <DialogSlotMark nodeId={nodeIds} dialogId={dialogId} stage={model}/>
                    : ''
                }
                {
                  this.state.activeKey == 3 ?
                    <SpecialCase nodeId={nodeIds} dialogId={dialogId} stage={model}/>
                    : ''
                }

              </div>
            </div>
          </div>
        );
      case 'filter':
        return (
          <div className={styles.pageWarp}>
            <Row>
              <Col span={1} style={{ width: 30 }}>
                   <span onClick={this.onClose} style={{ cursor: 'pointer', color: '#222' }}>
                      <Icon type="arrow-left"/>
                    </span>
              </Col>
              <Col span={2} style={{ marginRight: 14, width: 85 }} onClick={() => this.changeTabs(1)}>
                <span className={this.state.activeKey === 1 ? styles.blackText : styles.greyText}>筛选设置</span>
              </Col>
              <Col span={3} style={{ borderLeft: '2px solid lightgrey', paddingLeft: 37, width: 168 }}
                   onClick={() => this.changeTabs(2)}>
                <span className={this.state.activeKey === 2 ? styles.blackText : styles.greyText}>语料标注</span>
              </Col>
              <Col span={3} style={{ borderLeft: '2px solid lightgrey', paddingLeft: 37, width: 168 }}
                   onClick={() => this.changeTabs(3)}>
                <span className={this.state.activeKey === 3 ? styles.blackText : styles.greyText}>词槽抽取</span>
              </Col>
              <Col span={3} style={{ borderLeft: '2px solid lightgrey', paddingLeft: 37, width: 168 }}
                   onClick={() => this.changeTabs(4)}>
                <span className={this.state.activeKey === 4 ? styles.blackText : styles.greyText}>特殊情况</span>
              </Col>
            </Row>
            <div className={styles.cardContent}>
            <div className={styles.cardBody}>
              {
                this.state.activeKey === 1 ?
                  <FilterSet nodeId={nodeIds} dialogId={dialogId} stage={model}/>
                  : ''
              }
              {
                this.state.activeKey == 2 ?
                  <DialogSlotMark nodeId={nodeIds} dialogId={dialogId} stage={model}/>
                  : ''
              }
              {
                this.state.activeKey == 3 ?
                  <SlotExtra nodeId={nodeIds} stage={model} dialogId={dialogId}/>
                  : ''
              }
              {
                this.state.activeKey == 4 ?
                  <SpecialCase nodeId={nodeIds} dialogId={dialogId} stage={model}/>
                  : ''
              }

            </div>
            </div>
          </div>
        );
      case 'case':
        return (
          <div>
            <div className={styles.pageWarp}>
              <Row>
                <Col span={1} style={{ width: 30 }}>
                   <span onClick={this.onClose} style={{ cursor: 'pointer', color: '#222' }}>
                      <Icon type="arrow-left"/>
                    </span>
                </Col>
                <Col span={5} style={{ marginRight: 20 }} onClick={() => this.changeTabs(1)}>
                  <span className={styles.blackText}>触发条件模块编辑</span>
                </Col>
              </Row>
              <div className={styles.cardContent}>
              <div className={styles.cardBody}>
                <div style={{ margin: '15px 0px', paddingLeft: '30px' }}>
                  <span style={{ color: '#C8C8C8', fontSize: 15 }}> 触发条件类型</span>
                  <Radio.Group value={this.state.triggerCase} style={{ marginLeft: 20 }} onChange={event => {
                    this.changeCase(event);
                  }}>
                    <Radio value={1} style={{ marginLeft: 20 }}>词槽/API</Radio>
                    <Radio value={2} style={{ marginLeft: 20 }}>用户回复</Radio>
                  </Radio.Group>
                </div>
                {
                  this.state.triggerCase === 1 ?
                    <SlotOrApi nodeId={nodeIds} stage={model} dialogId={dialogId}/> :
                    <UserReply nodeId={nodeIds} stage={model} dialogId={dialogId}/>
                }
              </div>
              </div>
            </div>
          </div>
        );
      default:
        return (
          ''
        );
    }
  };

  render() {
    const { title, visible, model, dialogId, nodeIds } = this.props;
    return (
      <div className={styles.rightDrawer}>
        <Drawer
          closable={false}
          width='calc(100vw - 245px)'
          placement="right"
          onClose={this.onClose}
          visible={visible}
          destroyOnClose
        >
          {
            this.checkModel(model, dialogId, nodeIds)
          }
        </Drawer>
      </div>
    );
  }
}

export default RightDrawer;
